---
description: Визуальный индикатор для привлечения внимания к элементам интерфейса.
---

<Overview group="data-display">

# Badge [tag:component]

Визуальный индикатор для привлечения внимания к элементам интерфейса.
Используется для выделения новых функций, статусов или важной информации.

</Overview>

<Playground>
  ```jsx
  <Badge>Есть новые уведомления</Badge>
  ```
</Playground>

## Использование

- Старайтесь снабжать компонент _кратким_ текстом или числом.
- Размещайте компонент в непосредственной близости от целевого элемента.
- Для важных уведомлений дублируйте информацию в полноценной системе уведомлений.

<Playground>
  ```jsx
  <Tabs selectedId="messages" layoutFillMode="shrinked">
    <TabsItem id="dialogs" after={<Badge mode="prominent">Требуется подтверждение</Badge>}>
      Настройки
    </TabsItem>
    <TabsItem id="messages" after={<Badge>Есть новые</Badge>}>
      Уведомления
    </TabsItem>
  </Tabs>
  ```
</Playground>

## Доступность (a11y) [#a11y]

- Всегда передавайте смысловое содержимое в `children`.
- Избегайте декоративного использования без текста.

```jsx
// ❌ Плохо: пустой значок
<Badge mode="prominent" />

// ✅ Хорошо: понятный контент
<Badge mode="prominent">Новые сообщения</Badge>
```

## Свойства и методы [#api]

<PropsTable name="Badge" />
